<html>

<head>
    <title>猩猩电竞</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta itemprop="name" content="猩球大战问卷调查">
    <meta name="description" itemprop="description" content="下场自定义娱乐赛模式由你决定！" />
    <meta property="og:title" content="猩球大战问卷调查" />
    <meta property="og:description" content="下场自定义娱乐赛模式由你决定！" />
    <meta property="og:image" content="http://share.axingxing.com/allstar/images/logo.jpg" />

    <link rel="icon" href="http://share.axingxing.com/allstar/images/logo.jpg" type="image/vnd.microsoft.icon" />
    <style type="text/css">
        [title="站长统计"] {
            display: none;
        }
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        body{
 
            background: #339dff;
            font-family:Arial, Helvetica, sans-serif;
        }
        *{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}  
        .banner{
            position: relative;
            width: 100%;
            height: 6.77rem;
        }
        .logo{
            position: absolute;
            left: 50%;
            top: .58rem;
            margin-left: -1.39rem;
            width: 2.78rem;
            height: .69rem;
        }
        .wrapper{
            padding: 0 .6rem;
            color: #fff;
            position: relative;
        }
        .title{
            font-size: .26rem;
            line-height: .4rem;
        }
 .question-list{

 }
 .question-item{

 }
 .question-name{
     margin-top: .80rem;
    font-size: .3rem;
    line-height: .3rem;
 } 
 .clearfix{
  content:""; display: block; clear:both; 
 }
.answer-list{
    overflow: hidden;
   

}
 .answer-item{
    overflow: hidden;
    float: left;
    min-width: 50%;
    margin: .4rem 0 0 0;
    font-size: .24rem; 
    line-height: .4rem;
 }
 .answer-item .checkbox{
     float: left;
     position: relative;
     margin: 0 .1rem 0 0;
     width: .3rem;
     height: .3rem;
     border: .03rem solid #fff;
     border-radius: 50%;
 }
 .answer-item .checked:after{
    position: absolute;
    content: "";
    width: .16rem;
    height: .16rem;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;

    background: #faff6c;
    border-radius: 50%;
 }

 .answer-item .answer-content{
     float: left;

 }
 .input-common{
     outline: none;
     border: none;
     border-radius: .1rem;
     height: .7rem;
     color: #666;
     font-size: .24rem;
     padding: 0 .25rem;
 }
 .long-input{
     width: 6.3rem;
 }
 .short-input{
     margin-left: .2rem;
     width: 3.3rem;
 }
 .textarea{
    resize: none;
    outline: none;
    height: 2.65rem;
    width: 6.3rem;
    border-radius: .1rem;
    padding: .1rem .25rem;
    color: #666;
    font-size: .24rem;
}
.btn{
    margin: .8rem auto 0;
    width: 4.5rem;
    height: .8rem;
    background: #0060b8;
    color: #c4e3ff;
    font-size: .36rem;
    line-height: .8rem;
    text-align: center;
    border-radius: .4rem;
}  
.copyright{
    color: #fff;
    height: .58rem;
    font-size: .18rem;
    text-align: center;
    line-height: .18rem;
    margin: 1.2rem 0 0 0;
}
.foot{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;

}
    </style>
</head>

<body>
    <script type="text/javascript">
        (function (doc, win) { //rem布局
            var docElem = doc.documentElement;
            var resizeEvent = 'onorientationchange' in win ? 'orientationchange' : 'resize';
            recalc();
            // alert(resizeEvent)
            function recalc() {
                setViewport(1);
                var clientWidth = docElem.clientWidth;
                if (!clientWidth) return;
                // var dpr = win.devicePixelRatio || 1;
                var dpr = 1;
                var fontSize = 100 * (clientWidth / 750) * dpr + 'px';
                var scale = 1 / dpr;
                // alert(scale + ':' + fontSize)
                docElem.style.fontSize = fontSize;
                setViewport(scale);
            };

            function setViewport(scale) {
                var viewportElem = doc.querySelector('meta[name="viewport"]');
                if (!viewportElem) {
                    viewportElem = doc.createElement('meta');
                    doc.head.appendChild(viewportElem);
                }
                viewportElem.setAttribute('name', 'viewport');
                viewportElem.setAttribute('content', 'width=device-width, user-scalable=no, initial-scale=' + scale +
                    ', maximum-scale=' + scale + ', minimum-scale=' + scale);
            }

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvent, function () {
                setTimeout(function () {}, 1000);
                if ('orientation' in window) {
                    setTimeout(function () {
                        recalc();
                    }, 150);
                } else {
                    recalc();
                }

            }, false);
            doc.addEventListener('DOMContentLoaded', function () {
                recalc();
                setTimeout(function () { //解决小米  oppo 等部分手机适配问题
                    recalc();
                }, 50);
            }, false);

        })(document, window);
    </script>

    <div style="display: none;">
        <img src="http://share.axingxing.com/allstar/images/logo.jpg">
    </div>
    <div class="banner">
        <img src="./images/17_banner.png" alt="" class="banner">
        <img src="./images/17_logo.png" alt="" class="logo">
    </div>
    <div class="wrapper">
        <div class="title">
            猩猩电竞诚邀您填写问卷调查，您的建议有助于我们更 好的提升用户体验，感谢您的支持!!
        </div>
        <ul class="question-list">
            <li class="question-item">
                <div class="question-name"></div>
                <div class="question-answer">
                    <ul class="answer-list">
                        
                        
                    </ul>
                </div>
            </li>
            <li class="question-item">
                <div class="question-name"></div>
                <div class="question-answer">
                    <ul class="answer-list">
                        <li class="answer-item">
                            <input type="text" class="input-common long-input">
                        </li>
                    </ul>
                </div>
            </li>
            <li class="question-item">
                <div class="question-name"></div>
                <div class="question-answer">
                    <ul class="answer-list">
                        
                    </ul>
                </div>
            </li>
            <li class="question-item">
                <div class="question-name"></div>
                <div class="question-answer">
                    <ul class="answer-list">
                        <li class="answer-item">
                             <div class="checkbox"></div> 
                             <div class="answer-content"> 1、YY语音</div>
                        </li>
                        <li class="answer-item">
                             <div class="checkbox"></div> 
                             <div class="answer-content"> 2、队内语音</div>
                        </li>
                        <li class="answer-item">
                             <div class="checkbox" style="margin-top: 0.1rem;"></div> 
                             <div class="answer-content" style="margin-top: 0.1rem;">3、其他方式</div>
                             <input type="text" class="input-common short-input">
                        </li>
                    </ul>
                </div>
            </li>
            <li class="question-item">
                <div class="question-name"></div>
                <div class="question-answer">
                    <ul class="answer-list">
                        
                    </ul>
                </div>
            </li>
            <li class="question-item">
                <div class="question-name"></div>
                <div class="question-answer">
                    <ul class="answer-list">
                        
                    </ul>
                </div>
            </li>
            <li class="question-item">
                <div class="question-name"></div>
                <div class="question-answer">
                    <ul class="answer-list">
                        
                    </ul>
                </div>
            </li>
            <li class="question-item">
                <div class="question-name"></div>
                <div class="question-answer">
                    <ul class="answer-list">
                        <li class="answer-item">
                            <input type="text" class="input-common long-input">

                        </li>
                    </ul>
                </div>
            </li>
            <li class="question-item">
                <div class="question-name"></div>
                <div class="question-answer">
                    <ul class="answer-list">
                        
                    </ul>
                </div>
            </li>
            <li class="question-item">
                <div class="question-name"></div>
                <div class="question-answer">
                    <ul class="answer-list">
                        <li class="answer-item">
                            <textarea name="" id="" cols="30" rows="10" class="textarea"></textarea>

                        </li>
                    </ul>
                </div>
            </li>
            
        </ul>
        <div class="btn">
            提交
        </div>
        <div class="copyright">
            本活动与苹果公司及其他产品无关
        </div>
        <img src="./images/17_foot_1.png" alt="" class="foot-1 foot">
        <img src="./images/17_foot_2.png" alt="" class="foot-2 foot">
    </div>
    
    
    
    

    <!-- End Save for Web Slices -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="https://download.91playmate.cn/web/allstar/js/common.js" type="text/javascript"></script>
    <!-- <script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script> -->

    <script type="text/javascript">
    var shareInfo = {
            title: '猩球大战问卷调查',
            desc: '下场自定义娱乐赛模式由你决定！',
            link: window.location.href,
            imgUrl: 'http://share.axingxing.com/allstar/images/logo.jpg',
            type: '',
            dataUrl: '',
        };
    $(function () {
         if (!mutil.isXX) {
           
        } else {
          
        }

        var baseUrl = 'http://223.203.221.49:86/api/v1';
                    
        // if (mutil.getQueryString('xingxingTag') == 2) {
    
        //     baseUrl = 'http://223.203.221.49:86/api/v1';
         
        // }
        

        
        var question = [
            {
                id: 'Q1：经历了两周比赛，你最喜欢的模式是？',
                type: '2',
                count: [
                    '1、死斗模式',
                    '2、僵尸模式',
                    '3、超级空投',
                    '4、多倍物资模式',
                ],
            },
            {
                id: 'Q2：你最想体验的是什么模式？',
                type: '1',
            },
            {
                id: 'Q3：你最喜欢几个小伙伴一起吃鸡？',
                type: '2',
                count: [
                    '1、双排',
                    '2、四排',
                    '3、八排',
                    '4、我是独狼',
                ],
            },
            {
                id: 'Q4：你希望通过什么方式和队友交流？',
                type: '3',
            },
            {
                id: 'Q5：你希望你的对手是个怎样的人？',
                type: '2',
                count: [
                    '1、全是菜鸡，就喜欢虐菜',
                    '2、越强越好，可以交流学习，最好是职业队员',
                    '3、无所谓，来一个杀一个，我最厉害',
                ]
            },
            {
                id: 'Q6：如果你获胜了，你希望获得什么礼物？',
                type: '2',
                count: [
                    '1、游戏内道具、皮肤，可以让我变得炫酷',
                    '2、当然是钱啊，这还用问',
                    '3、我不需要礼物，只想让心仪的陪玩与我打游戏',
                    '4、电竞周边或外设产品',
                ]
            },
            {
                id: 'Q7：你最希望娱乐赛在哪一天举办？',
                type: '2',
                count: [
                    '1、周五',
                    '2、周六',
                    '3、周日',
                    '4、无所谓，一周都可以',
                ]
            },
            {
                id: 'Q8：你一般会在什么时间段打游戏呢？',
                type: '1',
            },
            {
                id: 'Q9：你觉得绝地求生这款游戏，最重要的是？',
                type: '2',
                count: [
                    '1、竞争性',
                    '2、娱乐性',
                    '3、交互性',
                    '4、奖品',
                ]
            },
            {
                id: 'Q10：最后，对于我们的猩球大战比赛，您有什 么宝贵的意见和建议吗？',
                type: '2',
            },
        ]

        
        var $questionItem = $('.question-item');
        var $questionName = $('.question-name');
        var $answerItem = $('.answer-item');
        var $answerList = $('.answer-list');
        var $checkbox = $('.checkbox');
        var $btn = $('.btn');
        var MAX_SELECT_NUM = 2;



        initQuestion();
        function initQuestion() {

            var temp = '';
            for (var i = 0; i < question.length; i++) {
                $($questionName[i]).text(question[i].id);
                $($questionItem[i]).addClass('Q' + (i + 1));

                if (question[i].count) {
                    for (var j = 0; j < question[i].count.length; j++) {
                    temp = '<li class="answer-item">' +
                           ' <div class="checkbox"></div>' +
                           ' <div class="answer-content">' +
                              question[i].count[j]+
                            '</div>' +
                        '</li>';

                        $($answerList[i]).append($(temp))
                    }
                    
                }
            }

            initCheckBox();
        }

        function initCheckBox() {
            $answerList.on('click', '.answer-item', function () {
                var $this = $(this);
                if (checkSelectNum($this) == MAX_SELECT_NUM && !$this.find('.checkbox').hasClass('checked')) {
                    alert('最多选择两个答案');
                    return;
                }
                
                
                if ($this.find('.checkbox').hasClass('checked')) {
                    
                    $this.find('.checkbox').removeClass('checked');
                } else {
                    
                    $this.find('.checkbox').addClass('checked');
                
                }
                

            })
        }

        submit();
        function submit() {
            $btn.on('click', function () {

                var content = {};
                var arr = [];
                var obj = {};
                for (var i = 0; i < $questionItem.length; i++) {
                    var answerArr = [];
                    
                    var list = $($answerList[i]);

                    if (list.find('.checked').length != 0) {
                        var checked = list.find('.checked');
                        for (var j = 0; j < checked.length; j++) {
                            answerArr.push($(checked[j]).next('.answer-content').text())
                        }
                    } else if (list.find('input').length != 0) {
                        answerArr.push(list.find('input').val());
                    } else if (list.find('textarea').length != 0) {
                        answerArr.push(list.find('textarea').val());
                    }
                    
                    obj.id = $($questionItem[i]).find('.question-name').text();
                    obj.type =  question[i].type;
                    obj.count =  answerArr;
                    arr.push(obj);
            
                    obj = {}
                }
                console.log(arr);
                
                content = JSON.stringify(arr);
                $.ajax({
                    url: baseUrl + '/api/sports/questionnaire',
                    method: 'post',
                    dataType: 'json',
                    xhrFields: { 'Access-Control-Allow-Origin': '*' },
                    data: {
                        uid: '234',
                        content: content,
                    },
                    timeout: 5000,
                    beforeSend: function (xhr) { 
                        
                    },
                    complete: function (xhr, status) {
                        if (status == "timeout") {
                            alert('请求超时，请重试')
                        }
                    }
                })
                .done(function (resultData) {
                    if (resultData.code == 200) {
                        alert('提交成功');
                    }
                    
                })
                .fail(function (errData) {
                    alert('提交失败');
                })
            })
        }
        function checkSelectNum($this) {
            return $this.parent().find('.checked').length
        }

    });
       



        

        
    </script>
    <script src="https://s13.cnzz.com/z_stat.php?id=1273647874&web_id=1273647874" language="JavaScript"></script>
</body>

</html>
